<template>
  <div class="banner">
    <div v-if="datas.form.source_list.length > 0" class="banner-body">
      <el-carousel height="133px" arrow="never" trigger="click">
        <el-carousel-item
          v-for="(item, index) in datas.form.source_list"
          :key="index"
        >
          <el-image :src="item.url" class="image">
            <div slot="error" class="image-error">
              <img
                class="image-error__icon"
                src="@/assets/images/template/h5/placeholder_medium.png"
              />
            </div>
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'Banner',
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style scoped lang="scss">
.banner {
  padding: 14px 15px;
  background: #ffffff;
  position: relative;
  &-body {
    ::v-deep.el-carousel__button {
      width: 5px;
      height: 5px;
    }
    .image {
      width: 100%;
      height: 100%;
      display: block;
    }
    ::v-deep.image-error {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: #f1f1f1;
      border-radius: 12px;
      .image-error__icon {
        width: 40px;
        height: 28px;
      }
    }
  }
}
</style>
